<template>
    <div id="canvas" style="width: 100%;height: 100%;" ref="canvas"></div>
</template>
  
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts'
const canvas = ref() // dom实例
let myChart: any = null // echarts实例

onMounted(() => {
    setTimeout(() => {
        renderChart()
    }, 200);

})
const renderChart = () => {
    const Data = ['1月', '2月', '3月', '4月', '5月', '6月']
    const sjlData = [200, 250, 370, 150, 350, 110]
    const bjlData = [150, 140, 300, 110, 260, 100]
    const balData = [80, 70, 80, 70, 80, 70, 80]
    const bjl2Data = [70, 60, 70, 60, 70, 90, 70]
    myChart = echarts.init(canvas.value)
    let option = {
        // backgroundColor: "#000",
        tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(13,5,30,.6)',
            borderWidth: 1,
            borderColor: '#4ddd8f',
            padding: 5,
            textStyle: {
                color: '#fff'
            }
        },
        legend: {
            itemWidth: 10,
            itemHeight: 10,
            top: 10,
            right: 30,
            icon: 'rect',
            textStyle: {
                color: '#c7d3e5'
            }
        },
        grid: {
            top: '25%',
            left: '5%',
            right: '5%',
            bottom: '5%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: Data,
                axisPointer: {
                    type: 'shadow'
                },
                axisTick: {
                    show: true,
                    length: 4,
                    lineStyle: {
                        color: 'rgba(199,211,229,0.5)'
                    }
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(199,211,229,0.5)'
                    }
                },
                axisLabel: {
                    color: '#c7d3e5'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                max: 500,
                nameTextStyle: {
                    color: '#c7d3e5'
                },
                axisLabel: {
                    color: '#c7d3e5'
                },
                axisTick: {
                    show: true,
                    length: 4,
                    lineStyle: {
                        color: 'rgba(64,136,254,1)'
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(199,211,229,0.3)',
                        width: 1,
                        type: 'dashed'
                    }
                }
            },
            {
                type: 'value',
                scale: true,
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'dashed',
                        color: 'rgba(199,211,229,0.3)'
                    }
                },
                max: 100,
                min: 0,
                axisLabel: {
                    formatter: '{value}%',  //右侧以百分比进行展示
                    show: true,
                    textStyle: {
                        color: '#c7d3e5',
                    }
                },
                nameTextStyle: {
                    color: '#c7d3e5'
                },
                axisTick: {
                    show: true,
                    length: 4,
                    lineStyle: {
                        color: 'rgba(64,136,254,1)'
                    }
                },
            }
        ],
        series: [
            {
                name: '超市零售额',
                type: 'bar',
                barWidth: 14,
                data: sjlData,
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: "rgba(11, 160, 255, 1)",
                        },
                        {
                            offset: 1,
                            color: "rgba(11, 160, 255, 0)",
                        },
                    ]),
                }
            },
            {
                name: '商铺零售额',
                type: 'bar',
                barWidth: 14,
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: "rgba(245, 213, 39, 1)",
                        },
                        {
                            offset: 1,
                            color: "rgba(245, 213, 39, 0)",
                        },
                    ]),
                },
                data: bjlData
            },
            {
                name: '超市零售额同比',
                type: 'line',
                yAxisIndex: 1,
                symbol: 'none',
                data: balData,
                itemStyle: {
                    color: '#2DF3E2'
                }
            },
            {
                name: '商铺零售额同比',
                type: 'line',
                yAxisIndex: 1,
                symbol: 'none',
                data: bjl2Data,
                itemStyle: {
                    color: '#885DFF'
                }
            }
        ]
    };
    myChart.setOption(option)
}
window.addEventListener("resize", function () {
    myChart?.resize();
});
</script>
  
<style lang="scss" scoped></style>
  